import { createApp } from 'vue'
import App from './App.vue'

// 导入重置样式文件
import '@/assets/less/index.less'

// 导入路由配置
import router from '@/router/index.js'

// Element-plus 完整导入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// ELement-Plus icon 全部导入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import { createPinia } from 'pinia'   // 导入 pinia 仓库
import '@/api/mock.js'   // 导入mock.js

import api from '@/api/api.js'

// el 语言换成中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useAllDataStore } from './stores'

function isRoute(to) {
  return router.getRoutes().filter(item => item.path === to.path).length > 0
}
router.beforeEach((to, form) => {
  // 如果要跳转的不是login,且token不存在(可以通过不存在token判断出用户未登录)
  if (to.path !== '/login' && !store.state.token) {
    // 跳转到login
    return { name: 'login' }
  }
  // 如果路由记录不存在，跳转到404界面
  if (!isRoute(to)) {
    return { name: '404' }
  }
})

const pinia = createPinia()   // 实例化仓库

const app = createApp(App)
app.config.globalProperties.$api = api   // 全局挂载 api 文件
app.use(ElementPlus, {
  locale: zhCn,
})   // Element-Plus 完整导入以及中文化
app.use(pinia)   // 使用 pinia 仓库
const store = useAllDataStore()
store.addMenu(router, 'refresh')
app.use(router)   // 使用路由
app.mount('#app')

// icon 全部全局注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}